<template>
  <div class="app-table">
    <a-button
      type="primary"
      @click="addVisible = !addVisible"
      style="margin-bottom: 10px"
      >添加学生/教师
    </a-button>
    <a-modal
      title="添加学生/教师"
      v-model:visible="addVisible"
      :confirm-loading="loading"
      @ok="add"
    >
      <a-form :model="addForm">
        <a-form-item label="学生/教师姓名">
          <a-input
            v-model:value="addForm.name"
            placeholder="请输入学生/教师姓名"
          />
        </a-form-item>
        <a-form-item label="登录用户名">
          <a-input
            v-model:value="addForm.username"
            placeholder="请输入用户名"
          />
        </a-form-item>
        <a-form-item label="登录密码">
          <a-input-password
            v-model:value="addForm.password"
            placeholder="请输入密码"
          />
        </a-form-item>
        <a-form-item label="学（工）号">
          <a-input
            v-model:value="addForm.stuffNum"
            placeholder="请输入学（工）号"
          />
        </a-form-item>
        <a-form-item label="学（书）院">
          <a-input
            v-model:value="addForm.college"
            placeholder="请输入学（书）院名称"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-table :columns="columns" :data-source="data">
      <template v-slot:action="{ record }">
        <span>
          <a-button
            type="danger"
            :disabled="record.id === id"
            @click="
              deleteVisible = !deleteVisible;
              deleteId = record.id;
            "
            >删除</a-button
          >
          <a-modal
            title="删除学生/老师"
            v-model:visible="deleteVisible"
            :confirm-loading="loading"
            :ok-button-props="{ type: 'danger' }"
            @ok="deleteStuff"
          >
            <a-descriptions title="学生/老师信息">
              <a-descriptions-item label="序号">
                {{ record.id }}
              </a-descriptions-item>
              <a-descriptions-item label="用户名">
                {{ record.username }}
              </a-descriptions-item>
              <a-descriptions-item label="姓名">
                {{ record.name }}
              </a-descriptions-item>
              <a-descriptions-item label="学（工）号">
                {{ record.stuffNumber }}
              </a-descriptions-item>
              <a-descriptions-item label="学（书）院">
                {{ record.college }}
              </a-descriptions-item>
            </a-descriptions>
            你确定要将删除该学生/老师？
          </a-modal>
        </span>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref } from "vue";
import { BASE_URL, myPost, Response } from "@/utils/request";
import { useStore } from "vuex";
import { message } from "ant-design-vue";

export default defineComponent({
  name: "StuffTable",
  setup() {
    const data = ref([] as any[]);
    const store = useStore();
    const name = computed(() => store.getters.name);
    const id = computed(() => store.getters.id);
    const curState = ref("");
    console.log(name);
    // const columns = computed(() => getColumns(data.value));
    const columns = [
      {
        dataIndex: "id",
        key: "id",
        title: "序号"
      },
      {
        dataIndex: "username",
        key: "username",
        title: "用户名"
      },
      {
        dataIndex: "name",
        key: "name",
        title: "姓名"
      },
      {
        dataIndex: "stuffNumber",
        key: "stuffNumber",
        title: "学（工）号"
      },
      {
        dataIndex: "college",
        key: "college",
        title: "学（书）院"
      },
      {
        key: "action",
        title: "操作",
        slots: { customRender: "action" }
      }
    ];

    function getStuffTable() {
      myPost(BASE_URL + "/admin/queryStuff", {}).then((resp: Response) => {
        data.value = (resp.data.data as any[]).map((item, key) => ({
          ...item,
          key
        }));
      });
    }

    const loading = ref(false);
    const addVisible = ref(false);
    const addForm = reactive({
      name: "",
      username: "",
      password: "",
      stuffNum: "",
      college: ""
    });

    let respBody = {
      isSuccess: false,
      msg: "",
      data: []
    };

    function success() {
      loading.value = false;
      const msg = respBody["msg"];
      message.success({ content: msg, duration: 2 });
    }

    function error() {
      loading.value = false;
      const msg = respBody["msg"];
      message.error({ content: msg, duration: 2 });
    }

    function update() {
      getStuffTable();
    }

    function add() {
      loading.value = true;
      myPost(BASE_URL + "/admin/addStuff", addForm)
        .then((resp: Response) => {
          respBody = resp.data;
          if (respBody["isSuccess"]) {
            success();
            addVisible.value = false;
          } else {
            error();
          }
          update();
        })
        .catch((error: any) => {
          message.error({ content: error, duration: 2 });
        });
    }

    const deleteVisible = ref(false);
    const deleteId = ref(0);

    function deleteStuff() {
      loading.value = true;
      console.log(deleteId.value);
      myPost(BASE_URL + "/admin/deleteStuff", {
        stuffId: deleteId.value
      })
        .then((resp: Response) => {
          respBody = resp.data;
          if (respBody["isSuccess"]) {
            success();
            deleteVisible.value = false;
          } else {
            error();
          }
          update();
        })
        .catch((error: any) => {
          message.error({ content: error, duration: 2 });
        });
    }

    update();

    return {
      id,
      curState,
      columns,
      data,
      name,
      addVisible,
      addForm,
      add,
      loading,
      deleteVisible,
      deleteId,
      deleteStuff
    };
  }
});
</script>
<style scoped></style>
